import React, { Component } from 'react';
import { connect } from 'react-redux'
import styles from './css/flowCharts.module.css';
import TimePicker from '../../components/flowCharts/timePicker/timePicker.jsx';

import Charts from '../../components/flowCharts/charts/Charts.jsx';
import { res } from './res.js';
class flowCharts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            beginTime: '',
            endTime: '',
            defaultOption: {
                toolbox: {
                    feature: {
                        dataView: { readOnly: true },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                title: {
                    left: 'left',
                    text: '客户流量时间表'
                },
                tooltip: {
                    trigger: 'axis'
                },
                yAxis: [{
                    splitLine: { show: true },
                    type: 'value'
                }],
                grid: [{
                    left: '6%',
                    right: '6%',
                    bottom: '25%'
                }]
            },
            chartDate: res.data
        }
    }
    updataTime = (timeStr) => {
        console.log('updataTime', timeStr);
        this.setState({
            beginTime: timeStr[0],
            endTime: timeStr[1]
        })
    }
    render() {
        return (
            <div className={styles.container}>
                <TimePicker
                    maxDyration={31}
                    onChange={(timeStr) => { this.updataTime(timeStr) }}
                />
                <Charts
                    data={{ ...this.state.defaultOption, ...this.state.chartDate }}
                    opts={{}}
                />
            </div>
        )
    }

}

export default connect(
    (state, ownProps) => ({
    }),
    (dispatch, ownProps) => ({
    })
)(flowCharts);